<template>
  <div class="app-container">
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #fb7884; color: #fff">
            <span style="font-size: 28px;">{{todayData.orders}}</span> <br>
            <span style="font-size: 14px;">今日订单总数</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #fb224b; color: #fff">
            <span style="font-size: 28px;">{{todayData.money}}</span> <br>
            <span style="font-size: 14px;">今日销售总额</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #03A9F3; color: #fff">
            <span style="font-size: 28px;">{{oneDayData.money}}</span> <br>
            <span style="font-size: 14px;">昨日销售总额</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #9675ce; color: #fff">
            <span style="font-size: 28px;">{{sevenDayData.money}}</span> <br>
            <span style="font-size: 14px;">近7天销售总额</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #e22dfb; color: #fff">
            <span style="font-size: 28px;">{{allDayData.orders}}</span> <br>
            <span style="font-size: 14px;">订单总数</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;padding: 30px 0; background: #E6A23C; color: #fff">
            <span style="font-size: 28px;">{{allDayData.money}}</span> <br>
            <span style="font-size: 14px;">销售总额</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{members._1day}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{members._7day}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{members._30day}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{members.all}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">近7天新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="24">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker
              style="float: right;z-index: 1"
              size="small"
              v-model="orderCountDate"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleDateChange"
              :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="true"
                :loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings"></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import * as dayJs from 'dayjs'
  import img_home_order from '@/assets/images/home_order.png';
  import img_home_today_amount from '@/assets/images/home_today_amount.png';
  import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';

  export default {
    name: 'home',
    data() {
      return {
        todayData: {
          money: 0,
          orders: 0
        },
        oneDayData: {
          money: 0,
          orders: 0
        },
        sevenDayData: {
          money: 0,
          orders: 0
        },
        allDayData: {
          money: 0,
          orders: 0
        },
        members: {
          all: 0,
          _7day: 0,
          _30day: 0,
          _1day: 0
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        orderCountDate: '',
        chartSettings: {
          xAxisType: 'time',
          area: true,
          axisSite: {right: ['orderAmount']},
          labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
        },
        chartData: {
          columns: [],
          rows: []
        },
        loading: true,
        dataEmpty: false,
        img_home_order,
        img_home_today_amount,
        img_home_yesterday_amount
      }
    },
    created() {
      this.initAllData();
    },
    methods: {
      initAllData() {
        this.initOrderCountDate();
        let dayDistance = 24 * 60 * 60 * 1000;
        let now = new Date();
        let nowString = dayJs(now).format('YYYY-MM-DD HH:mm:ss')
        let todayStart = dayJs(new Date(new Date(new Date().toLocaleDateString()).getTime())).format('YYYY-MM-DD HH:mm:ss')//今天
        let _1dayBefore = dayJs(new Date(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() - dayDistance)).format('YYYY-MM-DD HH:mm:ss'); //昨天
        let _7dayBefore = dayJs(new Date(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() - 6 * dayDistance)).format('YYYY-MM-DD HH:mm:ss'); //7天内
        this.getData()
      },
      handleDateChange(e) {
        let beginTime = e[0];
        let endTime = e[1];
        this.getData(dayJs(beginTime).format('YYYY-MM-DD HH:mm:ss'), dayJs(endTime).format('YYYY-MM-DD HH:mm:ss'));
      },
      initOrderCountDate() {
        let start = new Date();
        const end = new Date();
        start.setTime(start.getTime() - 1000 * 60 * 60 * 24 * 7);
        this.orderCountDate = [start, end];
      },
      getData(start, end) {
        this.chartData = {
          columns: ['t', 'orderCount', 'orderAmount'],
          rows: [
            {
              orderAmount: 187648.77,
              orderCount: 21,
              t: "2020-05-04"
            },
            {
              orderAmount: 326464.2,
              orderCount: 72,
              t: "2020-05-05"
            }
          ]
        };
      }
    }
  }
</script>

<style scoped>
  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .color-danger {
    color: #f56c6c;
  }

  .color-success {
    color: #13ce66;
  }
</style>
